import React,{ Suspense } from "react";
import { Routes,Route,useNavigate,useLocation,useParams,useSearchParams } from "react-router-dom";
import routes from './routes'
import { Mask } from 'antd-mobile'


const Element = function Element(props){
    let {component : Component,meta} = props
    //修改页面标题
    let {title = '知乎日报-WebApp'} = meta || {}
    document.title = title
    
    const navigate = useNavigate()
    const location = useLocation()
    const params = useParams()
    const searchParams = useSearchParams()
    return (
        <Component navigate={navigate} location={location} params={params} searchParams={searchParams}/>
    )
}

export default function RouterView(){
    return (
        <Suspense fallback={<Mask visible={true}></Mask>}>
            <Routes>
                {routes.map(item=>{
                    let {name,path} = item
                    return (
                        <Route key={name} path={path} element={<Element {...item}/>}></Route>
                    )
                })}
            </Routes>
        </Suspense>
    )
}